import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetIcons from '@unocss/preset-icons'
import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  content: {
    pipeline: {
      exclude: ['src/plugins/**/*.{vue,tsx}'],
    },
  },
  transformers: [transformerDirectives()],
  presets: [
    presetUno(),
    presetAttributify({
      ignoreAttributes: [
        'visible',
      ],
    }),
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetIcons({
      collections: {
        custom: FileSystemIconLoader(
          './src/assets/icons',
          svg => svg.replace(/#fff/, 'currentColor'),
        ),
      },
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
        'width': '1em',
        'height': '1em',
      },
      customizations: {
        transform(svg, collection) {
          if (collection === 'custom')
            return svg
          return svg.replace(/#fff/, 'currentColor')
        },
      },
    }),
  ],
  rules: [

  ],
  shortcuts: {
    'fx': 'flex',
    'fx1': 'flex-1',
    'fx-col': 'flex flex-col',
    'fx-j-c': 'flex justify-center',
    'fx-j-b': 'flex justify-between',
    'fx-j-s': 'flex justify-start',
    'fx-j-e': 'flex justify-end',
    'fx-a-c': 'flex items-center',
    'fx-a-b': 'flex items-between',
    'fx-a-s': 'flex items-start',
    'fx-a-e': 'flex items-end',
    'fx-cc': 'flex items-center justify-center',

    'w': 'w-full max-w-1200 mx-auto px10',
    'pointer': 'cursor-pointer',

    'btn': 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-10 rd-4 fx-cc',

    'text-333': 'text-gray-333',
    'text-666': 'text-gray-666',
    'text-999': 'text-gray-999',
  },
})
